import {Form, Row, Col, Input, Checkbox, DatePicker} from 'antd'
import React, {useState, useEffect, memo, useImperativeHandle} from 'react'
import {connect} from 'umi'

import moment from 'moment'
import styles from './index.less'
import 'moment/locale/zh-cn'

const view = memo((props: {routerQuery: any; detail: any; cRef: any}) => {
	const {routerQuery, detail, cRef} = props
	const [form] = Form.useForm()
	const [requiredConformanceDays, setRequiredConformanceDays] =
		useState<boolean>(false)
	const [requiredCompletionTime, setRequiredCompletionTime] =
		useState<boolean>(false)
	const [requiredTransportCapacity1, setRequiredTransportCapacity1] =
		useState<boolean>(false)
	const [requiredTransportCapacity2, setRequiredTransportCapacity2] =
		useState<boolean>(false)
	const [requiredTransportCapacity3, setRequiredTransportCapacity3] =
		useState<boolean>(false)
	const [requiredTransportCapacity4, setRequiredTransportCapacity4] =
		useState<boolean>(false)

	const [requiredTransportCapacity5, setRequiredTransportCapacity5] =
		useState<boolean>(false)
	const [requiredTransportCapacity6, setRequiredTransportCapacity6] =
		useState<boolean>(false)
	const onSelectFun = (allValues: any) => {
		if (allValues?.conformance?.length) {
			setRequiredConformanceDays(true)
		} else {
			setRequiredConformanceDays(false)
			form.setFieldsValue({conformanceDays: null})
		}
		if (allValues?.security?.includes('4')) {
			setRequiredCompletionTime(true)
		} else {
			setRequiredCompletionTime(false)
			form.setFieldsValue({completionTime: null})
		}
		if (allValues?.transportCapacity_1?.includes('1')) {
			setRequiredTransportCapacity1(true)
		} else {
			setRequiredTransportCapacity1(false)
			form.setFieldsValue({dailyAverageTsh: null})
		}
		if (allValues?.transportCapacity_2?.includes('2')) {
			setRequiredTransportCapacity2(true)
		} else {
			setRequiredTransportCapacity2(false)
			form.setFieldsValue({monthTsh: null})
		}

		if (allValues?.transportCapacity_3?.includes('3')) {
			setRequiredTransportCapacity3(true)
		} else {
			setRequiredTransportCapacity3(false)
			form.setFieldsValue({dailyPeakTsh: null})
		}
		if (allValues?.transportCapacity_4?.includes('4')) {
			setRequiredTransportCapacity4(true)
		} else {
			setRequiredTransportCapacity4(false)
			form.setFieldsValue({monthlyPeakTsh: null})
		}
		if (allValues?.transportCapacity_5?.includes('5')) {
			setRequiredTransportCapacity5(true)
		} else {
			setRequiredTransportCapacity5(false)
			form.setFieldsValue({dailyCompleteQuantity: null})
		}
		if (allValues?.transportCapacity_6?.includes('6')) {
			setRequiredTransportCapacity6(true)
		} else {
			setRequiredTransportCapacity6(false)
			form.setFieldsValue({monthlyCompleteQuantity: null})
		}
	}
	useEffect(() => {
		if (
			routerQuery.pageType === 'edit' ||
			routerQuery.pageType === 'process' ||
			routerQuery.pageType === 'detail'
		) {
			const transportCapacity: any = {
				transportCapacity_1: null,
				transportCapacity_2: null,
				transportCapacity_3: null,
				transportCapacity_4: null,
				transportCapacity_5: null,
				transportCapacity_6: null,
			}
			detail?.transportCapacity?.split(',').map((item: any) => {
				const index = `transportCapacity_${item}`
				transportCapacity[index] = item
				return item
			})
			const params = {
				...detail,
				...transportCapacity,
				completionTime: detail?.completionTime
					? moment(detail?.completionTime)
					: null,
			}
			form.setFieldsValue({...params})
			onSelectFun(params)
		}
	}, [detail])

	const onFormChange = (changedValues: any, allValues: any) => {
		onSelectFun(allValues)
	}
	useImperativeHandle(cRef, () => ({
		// changeVal 就是暴露给父组件的方法
		conditionsFormData: async () => {
			const value = await form.validateFields()
			return value
		},
	}))
	return (
		<div className={styles.form}>
			<Form
				form={form}
				name="basic"
				layout="horizontal"
				onValuesChange={onFormChange}
				labelCol={{flex: '150px'}}
				labelAlign="right"
				labelWrap
				initialValues={{remember: true}}
				autoComplete="off"
				disabled={
					routerQuery.pageType === 'detail' ||
					routerQuery.pageType === 'process'
				}>
				<Row gutter={12}>
					<Col span={24}>
						<div className="formItem">合规</div>
					</Col>
					<Col span={24}>
						<div className="flex">
							<Form.Item label="" name="conformance">
								<Checkbox.Group>
									<Checkbox value="1">提车后</Checkbox>
								</Checkbox.Group>
							</Form.Item>
							<Form.Item
								label=""
								name="conformanceDays"
								className="marginX"
								rules={[{required: requiredConformanceDays}]}>
								<Input
									placeholder="请输入"
									maxLength={10}
									disabled={
										!requiredConformanceDays ||
										routerQuery.pageType === 'detail' ||
										routerQuery.pageType === 'process'
									}
								/>
							</Form.Item>
							<Form.Item label="天获得人证" colon={false} />
						</div>
					</Col>
					<Col span={24}>
						<div className="formItem">安全</div>
					</Col>
					<Col sm={{span: 24}} md={{span: 24}} lg={{span: 24}}>
						<div className="flex">
							<Form.Item label="" name="security">
								<Checkbox.Group>
									<Checkbox value="1">无欠租</Checkbox>
									<Checkbox value="2">无违章</Checkbox>
									<Checkbox value="3">无出险</Checkbox>
									<Checkbox value="4" />
								</Checkbox.Group>
							</Form.Item>
							<Form.Item
								label=""
								name="completionTime"
								className="marginX"
								rules={[{required: requiredCompletionTime}]}>
								<DatePicker
									format="YYYY-MM-DD"
									disabled={
										!requiredCompletionTime ||
										routerQuery.pageType === 'detail' ||
										routerQuery.pageType === 'process'
									}
								/>
							</Form.Item>
							<Form.Item label="完成车检" colon={false} />
						</div>
					</Col>
					<Col span={24}>
						<div className="formItem">动力</div>
					</Col>
					<Col sm={{span: 24}} md={{span: 16}} lg={{span: 12}}>
						<div className="flex">
							<Form.Item
								label=""
								name="transportCapacity_1"
								className="widthLabel">
								<Checkbox.Group>
									<Checkbox value="1">日均TSH</Checkbox>
								</Checkbox.Group>
							</Form.Item>
							<Form.Item
								label=""
								name="dailyAverageTsh"
								className="marginX"
								rules={[
									{required: requiredTransportCapacity1},
								]}>
								<Input
									placeholder="请输入"
									maxLength={10}
									disabled={
										!requiredTransportCapacity1 ||
										routerQuery.pageType === 'detail' ||
										routerQuery.pageType === 'process'
									}
								/>
							</Form.Item>
							<Form.Item label="小时" colon={false} />
						</div>
					</Col>
					<Col sm={{span: 24}} md={{span: 16}} lg={{span: 12}}>
						<div className="flex">
							<Form.Item
								label=""
								name="transportCapacity_2"
								className="widthLabel">
								<Checkbox.Group>
									<Checkbox value="2">月TSH</Checkbox>
								</Checkbox.Group>
							</Form.Item>
							<Form.Item
								label=""
								name="monthTsh"
								className="marginX"
								rules={[
									{
										required: requiredTransportCapacity2,
									},
								]}>
								<Input
									placeholder="请输入"
									maxLength={10}
									disabled={
										!requiredTransportCapacity2 ||
										routerQuery.pageType === 'detail' ||
										routerQuery.pageType === 'process'
									}
								/>
							</Form.Item>
							<Form.Item label="小时" colon={false} />
						</div>
					</Col>
					<Col span={24} />
					<Col sm={{span: 24}} md={{span: 16}} lg={{span: 12}}>
						<div className="flex">
							<Form.Item
								label=""
								name="transportCapacity_3"
								className="widthLabel">
								<Checkbox.Group>
									<Checkbox value="3">日均高峰TSH</Checkbox>
								</Checkbox.Group>
							</Form.Item>
							<Form.Item
								label=""
								name="dailyPeakTsh"
								className="marginX"
								rules={[
									{required: requiredTransportCapacity3},
								]}>
								<Input
									placeholder="请输入"
									maxLength={10}
									disabled={
										!requiredTransportCapacity3 ||
										routerQuery.pageType === 'detail' ||
										routerQuery.pageType === 'process'
									}
								/>
							</Form.Item>
							<Form.Item label="小时" colon={false} />
						</div>
					</Col>
					<Col sm={{span: 24}} md={{span: 16}} lg={{span: 12}}>
						<div className="flex">
							<Form.Item
								label=""
								name="transportCapacity_4"
								className="widthLabel">
								<Checkbox.Group>
									<Checkbox value="4">月高峰TSH</Checkbox>
								</Checkbox.Group>
							</Form.Item>
							<Form.Item
								label=""
								name="monthlyPeakTsh"
								className="marginX"
								rules={[
									{required: requiredTransportCapacity4},
								]}>
								<Input
									placeholder="请输入"
									maxLength={10}
									disabled={
										!requiredTransportCapacity4 ||
										routerQuery.pageType === 'detail' ||
										routerQuery.pageType === 'process'
									}
								/>
							</Form.Item>
							<Form.Item label="小时" colon={false} />
						</div>
					</Col>
					<Col span={24} />
					<Col sm={{span: 24}} md={{span: 16}} lg={{span: 12}}>
						<div className="flex">
							<Form.Item
								label=""
								name="transportCapacity_5"
								className="widthLabel">
								<Checkbox.Group>
									<Checkbox value="5">日均完单量</Checkbox>
								</Checkbox.Group>
							</Form.Item>
							<Form.Item
								label=""
								name="dailyCompleteQuantity"
								className="marginX"
								rules={[
									{required: requiredTransportCapacity5},
								]}>
								<Input
									placeholder="请输入"
									maxLength={10}
									disabled={
										!requiredTransportCapacity5 ||
										routerQuery.pageType === 'detail' ||
										routerQuery.pageType === 'process'
									}
								/>
							</Form.Item>
							<Form.Item label="小时" colon={false} />
						</div>
					</Col>
					<Col sm={{span: 24}} md={{span: 16}} lg={{span: 12}}>
						<div className="flex">
							<Form.Item
								label=""
								name="transportCapacity_6"
								className="widthLabel">
								<Checkbox.Group>
									<Checkbox value="6">月完单量</Checkbox>
								</Checkbox.Group>
							</Form.Item>
							<Form.Item
								label=""
								name="monthlyCompleteQuantity"
								className="marginX"
								rules={[
									{required: requiredTransportCapacity6},
								]}>
								<Input
									placeholder="请输入"
									maxLength={10}
									disabled={
										!requiredTransportCapacity6 ||
										routerQuery.pageType === 'detail' ||
										routerQuery.pageType === 'process'
									}
								/>
							</Form.Item>
							<Form.Item label="小时" colon={false} />
						</div>
					</Col>
				</Row>
			</Form>
		</div>
	)
})
export default connect(({user}: any) => ({user}))(view)
